<template>
  <div class="common-layout">


    <el-container>
      <el-header class="head-wrap">
          
          <el-row :gutter="20">
            <el-col :span="4">
                <img class="logo" src="@/assets/logo.png" alt="" />
            </el-col>
            
            <el-col :span="16">
                <h2>后台管理系统</h2>
            </el-col>

            <el-col :span="4">
                <el-button @click="logout">退出登陆</el-button>
            </el-col>
        </el-row>

      </el-header>

      <el-container>
        <el-aside>

            <el-menu
                class="el-menu-vertical-demo"
                active-text-color="#ffd04b"
                background-color="#545c64"
                text-color="#ffffff"
                :default-active="route.path"
                @open="handleOpen"
                @close="handleClose"
                router
            >
                <!-- 开启router模式之后，可以通过 :index的值去跳转 -->
                <el-menu-item :index="item.path" v-for="(item,index) in list" :key="index">
                    <span>{{item.meta.title}}</span>
                </el-menu-item>

            </el-menu>

        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>


    </el-container>


  </div>
</template>


<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { ElMessage } from 'element-plus'


export default defineComponent({
    setup () {
        // 带 r 的是方法作用
        const router  = useRouter();
        
        const list:any = router.getRoutes().filter(v=>v.meta.isShow);

        // 不带 r 的是信息数据用的
        const route = useRoute();
        
        let handleOpen = ()=>{
            console.log("handleOpen");
        }
        let handleClose = ()=>{
            console.log("handleClose");
        }
        const logout = ()=>{
            localStorage.removeItem("token");
            ElMessage.success("退出登陆成功");
            router.replace("/login")
        }

        return {handleOpen,handleClose,list,route,logout,ElMessage}
    }
})
</script>

<style scoped lang="scss">
.common-layout{
    // 顶部
    .head-wrap{
        height: 80px;
        background-color: #f3f3f3;
        line-height: 80px;
        .logo{
            width: 50px;
            height: 40px;
            margin-top: 20px;
        }
        h2{
            text-align: center;
            height: 80px;
        }
    }
    
    // 侧边栏
    .el-aside{
        .el-menu{
            height: calc(100vh - 80px);
            // background-color: red;
        }
    }
}


</style>